<template>
   <Nav></Nav>
    <div class="container-fluid" style="margin-top: 100px">
      <div class="row">
        <div class="col-md-3"></div>
        <div class="col-md-6">
          <table
            style="text-align: center"
            class="table table-bordered"
            align="center"
            width="100%"
          >
            <tr class="bg-light text-black-50">
              <th colspan="2" style="text-align: center">
                <h3>管理员注册</h3>
              </th>
            </tr>
            <tr>
              <td><i class="fa fa-user fa-2x"></i></td>
              <td>
                <input
                  class="form-control"
                  placeholder="请输入用户名"
                  type="text"
                  v-model="userData.username"
                  id="username"
                />
              </td>
            </tr>
            <tr>
              <td><i class="fa fa-lock fa-2x"></i></td>
              <td>
                <input
                  class="form-control"
                  placeholder="请输入密码"
                  type="password"
                  v-model="userData.password"
                  id=""
                />
              </td>
            </tr>
            <tr>
              <td><i class="fa fa-image fa-2x"></i></td>
              <td>
                <input
                  class="form-control"
                  placeholder="授权码"
                  type="text"
                  v-model="userData.code"
                  id="safeCode"
                />
              </td>
            </tr>
            <tr>
              <td>
                <input class="btn btn-outline-info" type="reset" value="重置" />
              </td>
              <td>
                <input
                  class="btn btn-success"
                  style="width: 200px"
                  type="submit"
                  @click="AdminRegister()"
                  value="注册"
                />
              </td>
              <td valign="middle" align="right">
                <a href="/">管理员账户登录</a>
              </td>
            </tr>
          </table>
        </div>
        <div class="col-md-3"></div>
      </div>
    </div>
</template>

<script lang="ts" setup name="Register">
import Nav from "../Nav.vue";
import "../../assets/css/bootstrap.min.css";
import "../../assets/css/font-awesome.css";
import { ref, reactive } from "vue";
import { useRouter } from "vue-router";
import { ElMessage } from "element-plus";
const router = useRouter();
const userName = ref("");
import { register } from "../../api/user";
const userData = reactive({
  username: "",
  password: "",
  code: "",
});

const AdminRegister = async () => {
  const res = await register(userData);
  if (res.data.code === 1) {
    res.data.data.username = userName.value;
    ElMessage.success("注册成功");
        router.push('/')
  }
  if (res.data.code === 0) {
    ElMessage.error(res.data.msg);
  }
};
</script>

<style scoped></style>
